<template>
    <div id="app">
        <el-container>
            <el-header>头部标题栏</el-header>
            <el-container>
                <el-aside width="200px">

                    <!--          左侧菜单栏-->
<!--                    $route.path,当前激活菜单的index路径-->
                    <el-menu
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            background-color="#545c64"
                            text-color="#fff"
                            router
                            :default-active="$route.path"
                            active-text-color="#ffd04b">

                        <el-menu-item>
                            <h1 class="bt">偶像练习生管理系统</h1>
                        </el-menu-item>
<!--                        index:代表映射跳转的路径-->
                        <el-submenu :index="m.path+''"  v-for="m in menus" :key="m.id">
                            <template slot="title">
                                <i :class="m.icon"></i>
                                <span>{{m.text}}</span>
                            </template>
                            <el-menu-item :index="m.path+'/'+child.path" v-for="child in m.children">
                                <i :class="child.icon"></i>
                                <span slot="title">{{child.text}}</span>
                            </el-menu-item>
                        </el-submenu>


                    </el-menu>
                </el-aside>
                <el-main>
                        <el-card shadow="hover">
                            crush on you
                            <router-view/>
                        </el-card>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: right;
        line-height: 60px;
    }

    .el-aside {
        text-align: center;
        height: 800px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }

    .bt {
        font-size: 18px;
    }


    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>

<script>
    import menus from "@/assets/menu";

    export default {
        name: 'APP',
        data() {
            return {
                menus: menus
            }
        },
        methods:{
            handleOpen(key,path){
                console.log(key,path)
            },
            handleClose(key,path){
                console.log(key,path)
            }
        }
    }
</script>

